<template>
    <div class="page-login">
        <img class="logo" src="@/static/images/live/logo.png" alt="">
        <u-tabs :list="tabList" @click="handleClick"></u-tabs>
        <div>
            <u-form ref="form" labelPosition="left" :rules="rules" :model="formData" labelWidth="10">
                <u-form-item prop="mobile" borderBottom>
                    <u-input :placeholder="mobilePlaceholder" v-model="formData.mobile" clearable></u-input>
                </u-form-item>
                <u-form-item prop="code" borderBottom v-if="currentTab === 1">
                    <u-input placeholder="请输入验证码" maxlength="4" v-model="formData.code" type="number">
                        <template slot="suffix">
                            <u-code ref="uCode" @start="disabled = true" @end="disabled = false" @change="codeChange"
                                seconds="60"></u-code>
                            <u-button :disabled="disabled" color="rgba(41, 95, 255, 1)" @tap="getCode" :text="tips"
                                type="success" size="mini"></u-button>
                        </template>
                    </u-input>
                </u-form-item>
                <u-form-item prop="password" borderBottom v-else>
                    <u-input placeholder="请输入密码" v-model="formData.password" password clearable></u-input>
                </u-form-item>

            </u-form>
            <u-button style="margin-top: 100px;" @click="submit" size="large" shape="circle" text="登录"></u-button>
        </div>
    </div>
</template>

<script>
import { sendSms } from '@/api/user'
export default {
    async onLoad({ liveId }) {
        if (liveId) {
            return this.liveId = liveId
        }
        uni.showToast({
            title: '直播间获取失败',
            icon: 'none'
        })
    },
    data() {
        const validatePhone = (_rule, value, callback) => {
            if (!value) {
                callback(
                    new Error(
                        this.mobilePlaceholder
                    )
                );
                return false;
            } else {
                callback();
            }
            callback();
        };
        return {
            liveId: '',
            disabled: false,
            tips: '获取验证码',
            currentTab: 1,
            tabList: [{
                id: 1,
                name: '短信验证',
            }, {
                id: 2,
                name: '密码登陆',
            }],
            validateParams: {
                ticket: '',
                randStr: ''
            },
            formData: {
                mobile: '',
                password: '',
                code: ''
            },
            rules: {
                mobile: [{
                    required: true,
                    validator: validatePhone,
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }],
                code: [{
                    required: true,
                    message: '请输入验证码',
                    trigger: 'blur'
                },
                ],
            },
        }
    },
    computed: {
        mobilePlaceholder() {
            return this.currentTab === 2 ? '请输入手机号码/帐号' : '请输入手机号码'
        }
    },
    methods: {
        codeChange(text) {
            this.tips = text;
        },

        getCode() {
            this.$refs.form.validateField('mobile', (valid) => {
                if (!valid.length) {
                    const captcha = new TencentCaptcha('192481447', (res) => {
                        console.log(res);
                        if (res.ret !== 0) return;
                        this.validateParams.ticket = res.ticket;
                        this.validateParams.randStr = res.randstr;
                        sendSms({
                            mobile: this.formData.mobile,
                            type: 0,
                            txCaptchaReq: {
                                ...this.validateParams,
                            }
                        })
                        this.$refs.uCode.start();
                    });
                    captcha.show(); // 显示验证码
                }
            });
        },
        handleClick(item) {
            this.$refs.form.resetFields();
            this.$refs.form.clearValidate()
            this.currentTab = item.id;
        },

        submit() {
            if (!this.liveId) {
                return uni.showToast({
                    title: '直播间获取失败',
                    icon: 'none'
                })
            }
            this.$refs.form.validate().then((valid) => {
                if (!valid.length) {
                    this.login();
                }
            })
        },
        async login() {
            const { data } = await this.$request('/user/login', {
                txCaptchaReq: this.validateParams,
                ...this.formData
            })

            if (data.code === 200) {
                uni.setStorageSync('b-token', data.data.accessToken);
                uni.showToast({
                    title: '登录成功',
                })
                uni.reLaunch({
                    url: `/pages/live/index?liveId=${this.liveId}`
                })
                return
            }

            uni.showToast({
                title: data.msg || '登录失败',
                icon: 'none'
            })
        }
    }
}


</script>
<style lang="scss">
.page-login {

    height: 100vh;
    padding: 16px;
    background-image: url('@/static/images/live/login-bg.png');
    background-size: cover;
    background-repeat: no-repeat;

    .logo {

        width: 82px;
        margin-bottom: 8%;
    }
}
</style>